<template>
  <el-container>
    <el-header>
       <h1 align="center">考试名称:{{examName}}</h1>
    </el-header>
    <el-main>
      <div align="center">
        <h2>考试开始时间{{exam.startTime}}&nbsp;考试截止时间{{exam.endTime}}</h2>
        <h3>考试总分:{{exam.paperTotal}}&nbsp;&nbsp;考生:{{name}}</h3>
        <h3>考试剩余时间:</h3>
        <el-statistic :value="time" time-indices
                      @finish="endSubmit"
                      format="HH:mm:ss"
        ></el-statistic>
      </div>
      <h3>一:单选题</h3>
      <template v-for="(x,index) in exam.listQu">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{index+1}}: {{x.quName}}</span>
          </div>
          <div class="text item">
            <p><input type="radio" value="A" :name="'s'+index">{{x.quA}}</p>
            <p><input type="radio" value="B" :name="'s'+index">{{x.quB}}</p>
            <p><input type="radio" value="C" :name="'s'+index">{{x.quC}}</p>
            <p><input type="radio" value="D" :name="'s'+index">{{x.quD}}</p>
          </div>
        </el-card>
        <br>
      </template>
        <div align="center">
              <el-button type="success" size="mini" @click="submit">交卷</el-button>
        </div>
    </el-main>
  </el-container>

</template>

<script>
  import $ from 'jquery'
    export default {
        name: "CurExam",
        data(){
           return{
               exam:{"startTime":""},
               name:"",//考生
               examName:"",//考试名称
               time:Date.now()+1000*6,
               answers:[],
               examUserId:null,//考试用户主键id
           }
        },
        methods:{
              queryMyExam(){
                  const self = this;
                  this.$http.get("/server-exam-manager/exam/exam/1",
                    {params:{"examName":self.examName}}
                    ).then(function (rs) {
                        console.log(rs.data.data.endTime);
                        if(rs.data.code==200){
                          self.exam = rs.data.data;
                          //获取时间戳
                          self.time=Date.parse(rs.data.data.endTime);
                        }
                  })
              },
          submit(){//交卷
                //清空答案
               this.answers=[];
                //获取选中答案
                for(var i=0;i<this.exam.listQu.length;i++){
                     var v = $("input[name='s"+i+"']:checked").val();
                     this.answers.push(v);
                }
                console.log(this.answers);
                //评分
            const self = this;
            this.$http.post("/server-exam-manager/exam/exam/2",
              {
                "name":self.name,
                "examName":self.examName,
                "answers":self.answers,
                "examUserId":self.examUserId
              }
            ).then(function (rs) {
              console.log(rs.data);
            })

          },
          endSubmit(){//倒计时结束后触发事件
                this.$alert("时间到了！交卷");
                this.submit();
                //回到登录
                //this.$router.push("/");
          }

        },
        created() {
            this.examName= localStorage.getItem("examName");
            this.examUserId= localStorage.getItem("examUserId");
            //console.log(this.examName);
            this.queryMyExam();
            this.name = localStorage.getItem("name");


        }
    }
</script>

<style scoped>

</style>
